<template>
	<view class=" ">
  <view class="cu-bar bg-white solid-bottom">
  	<view class="action">
  		<text class="cuIcon-title text-orange "></text> 消息列表
  	</view>
  </view>
  <view class="cu-list menu-avatar">
  	<view class="cu-item">
  		<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
  		<view class="content">
  			<view class="text-grey">凯尔</view>
  			<view class="text-gray text-sm flex">
  				<view class="text-cut">
  					<text class="cuIcon-infofill text-red  margin-right-xs"></text>
  					我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
  				</view> </view>
  		</view>
  		<view class="action">
  			<view class="text-grey text-xs">22:20</view>
  			<view class="cu-tag round bg-grey sm">5</view>
  		</view>
  	</view>
  	<view class="cu-item">
  		<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
  			<view class="cu-tag badge">99+</view>
  		</view>
  		<view class="content">
  			<view class="text-grey">
  				<view class="text-cut">瓦洛兰之盾-塔里克</view>
  				<view class="cu-tag round bg-orange sm">战士</view>
  			</view>
  			<view class="text-gray text-sm flex">
  				<view class="text-cut">
  					塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
  				</view>
  			</view>
  		</view>
  		<view class="action">
  			<view class="text-grey text-xs">22:20</view>
  			<view class="cuIcon-notice_forbid_fill text-gray"></view>
  		</view>
  	</view>
  	<view class="cu-item ">
  		<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
  		<view class="content">
  			<view class="text-pink"><view class="text-cut">莫甘娜</view></view>
  			<view class="text-gray text-sm flex"> <view class="text-cut">凯尔，你被自己的光芒变的盲目！</view></view>
  		</view>
  		<view class="action">
  			<view class="text-grey text-xs">22:20</view>
  			<view class="cu-tag round bg-red sm">5</view>
  		</view>
  	</view>
  	<view class="cu-item grayscale">
  		<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
  		<view class="content">
  			<view><view class="text-cut">伊泽瑞尔</view>
  				<view class="cu-tag round bg-orange sm">断开连接...</view>
  			</view>
  			<view class="text-gray text-sm flex"> <view class="text-cut"> 等我回来一个打十个</view></view>
  		</view>
  		<view class="action">
  			<view class="text-grey text-xs">22:20</view>
  			<view class="cu-tag round bg-red sm">5</view>
  		</view>
  	</view>
  	<view class="cu-item cur">
  		<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
  			<view class="cu-tag badge"></view>
  		</view>
  		<view class="content">
  			<view>
  				<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
  				<view class="cu-tag round bg-orange sm">6人</view>
  			</view>
  			<view class="text-gray text-sm flex">
  				<view class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view>
  		</view>
  		<view class="action">
  			<view class="text-grey text-xs">22:20</view>
  			<view class="cuIcon-notice_forbid_fill text-gray"></view>
  		</view>
  	</view>
  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
				 
		},
		methods: {
			 
		}
	}
</script>

<style>
	.msg-container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.msg-list {
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.msg-item {
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.msg-avatar {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.msg-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 24rpx;
		min-width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
	}

	.msg-content {
		flex: 1;
	}

	.msg-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.msg-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.msg-time {
		font-size: 24rpx;
		color: #999;
	}

	.msg-desc {
		font-size: 28rpx;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
	}

	.empty-state image {
		width: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-state text {
		font-size: 30rpx;
		color: #999;
	}
</style>
